<template>
  <view :class="'Mall4j stars ' + type">
    <image class="star" v-for="(item, index) in value" :key="index" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/star-red.png" :data-val="index+1" @tap="changeVal" />
    <image class="star" v-for="(item, index) in 5-value" :key="(index + value)" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/star-empty.png" :data-val="value+index+1" @tap="changeVal" />
  </view>
</template>

<script>

export default {

  components: {},
  props: {
    value: Number,
    type: String,
    index: Number
  },
  data () {
    return {

    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  methods: {
    changeVal (e) {
      if (this.type) {
        const value = e.currentTarget.dataset.val
        this.$emit('onStarChange', {
          val: Number(value),
          idx: this.index
        })
      }
    }
  }
}
</script>
<style>
@import "./index.css";
</style>
